import React, { Component } from 'react';
import { connect } from 'react-redux';
import Util from "../utils/Util";
import * as DataName from '../action/DataNameConfig';
import EchartsPie from "./charts/EchartsPie";
import { Row, Col, Card, Select } from "antd";
const Option = Select.Option;

class Main extends Component {
    constructor(props){
        super(props);
        this.handleChange=(value)=>{
            console.log(value);
        }
    }
    componentWillMount(){
        Util.setMenuOpenKey(this.props,"index");
    }
    render() {
        const optionArr = DataName.COMPANY_AREA_DATA.map(res=> <Option value={res.value}>{res.label}</Option>)
        return (
            <div className={"page-section"}>
                {/*<BreadcrumbCustom breadList={breadList} />*/}
                <Row gutter={16}>
                    <Col span={12}>
                        <Card title={"预警分布统计"} bordered={false}>
                            <div className={"warning-count"}>
                                <Select defaultValue="0" style={{ width: 120 }} className={"ma-bot"} onChange={this.handleChange}>
                                    <Option value="0">全部</Option>
                                    {optionArr}
                                </Select>
                                <div className={"count-pie"}>
                                    <EchartsPie
                                        width="350px"
                                        height="350px"
                                        number={100}
                                        otherNumber={200}
                                        color={"#1890FF"}
                                        name={"逾期固废"}
                                    />
                                </div>
                                <div className={"count-pie"}>
                                    <EchartsPie
                                        width="350px"
                                        height="350px"
                                        number={100}
                                        otherNumber={200}
                                        color={"#1CC652"}
                                        name={"异常固废"}
                                    />
                                </div>
                            </div>
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card title={"企业分布情况"} bordered={false}>
                            <div className={"company-count"}>
                                <Select defaultValue="0" style={{ width: 120 }} className={"ma-bot"} onChange={this.handleChange}>
                                    <Option value="0">全部</Option>
                                    {optionArr}
                                </Select>
                                <Row gutter={16} className={"ma-bot"}>
                                    <Col span={12}>
                                        <div className={"count-pie"}>
                                            <EchartsPie
                                                width="350px"
                                                height="350px"
                                                number={100}
                                                otherNumber={200}
                                                color={"#BFE4FD"}
                                                name={"运输企业"}
                                                radius={['40%','70%']}
                                            />
                                        </div>
                                    </Col>
                                    <Col span={12}>
                                        <div className={"count-pie"}>
                                            <EchartsPie
                                                width="350px"
                                                height="350px"
                                                number={100}
                                                otherNumber={200}
                                                color={"#BFE4FD"}
                                                name={"处置企业"}
                                                radius={['40%','70%']}
                                            />
                                        </div>
                                    </Col>
                                </Row>
                                <Row gutter={16}>
                                    <Col span={12}>
                                        <div className={"count-pie"}>
                                            <EchartsPie
                                                width="350px"
                                                height="350px"
                                                number={100}
                                                otherNumber={200}
                                                color={"#BFE4FD"}
                                                name={"产废企业"}
                                                radius={['40%','70%']}
                                            />
                                        </div>
                                    </Col>
                                    <Col span={12}>
                                        <div className={"count-pie"}>
                                            <EchartsPie
                                                width="350px"
                                                height="350px"
                                                number={100}
                                                otherNumber={200}
                                                color={"#BFE4FD"}
                                                name={"中介企业"}
                                                radius={['40%','70%']}
                                            />
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default connect(state=>({
    User: state.User,
    CommonSystem: state.CommonSystem,
    BaseData: state.BaseData
}))(Main);
